<template>
  <view class="card-bot-container" :style="style">
    <view class="value-card-bot" :class="isSkip ? '' : 'game'">
      <!--   -->
      <block v-if="!isSkip">
        <card-lottery-item
          v-for="(item, index) in fakeList"
          :key="index"
          :details="item"
        ></card-lottery-item>
      </block>

      <view class="card-lottery-gg">
        <!-- <view
          class="bord"
          v-if="(details.reward_level || details.level) == 5 && magnify"
        >
          <image class="border-img" :src="at_0" />
        </view>
        <view
          class="bord c"
          v-if="(details.reward_level || details.level) == 4 && magnify"
        >
          <image class="border-img c" :src="at_1" />
        </view> -->

        <card-lottery-item
          :details="details"
          :magnify="magnify"
        ></card-lottery-item>
        <card-lottery-item
          v-if="(details.reward_level || details.level) == 5"
          class="gg-level"
          :magnify="magnify"
          :class="
            (details.reward_level || details.level) == 5 && magnify
              ? 'remind'
              : ''
          "
          :details="details"
        ></card-lottery-item>
      </view>
    </view>
  </view>
</template>
<script>
import CardLotteryItem from './card-lottery-item.vue';
import at_0 from '../img/active-0.png';
import at_1 from '../img/active-1.png';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { CardLotteryItem },
  props: {
    isSkip: {
      type: Boolean,
      default: false,
    },
    magnify: {
      type: Boolean,
      default: false,
    },
    number: {
      type: [String, Number],
      default: 1,
    },
    fakeList: {
      type: Array,
      default: () => [],
    },
    details: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return { at_0, at_1 };
  },
  // 计算属性 适配者模式
  computed: {
    style() {
      return `--num: ${this.number * 5};`;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}
.card-bot-container {
  margin: 0 auto;
  position: relative;
  padding: 16rpx 8rpx 12rpx;
  width: 160rpx;
  height: 222rpx;
  overflow-y: hidden;
  overflow-x: visible;
  // transition: all 0.6s;
  --timing: 0.2s;
  --num: 5;
  .value-card-bot.game {
    animation: silde-in-contract var(--timing) linear 1.5s var(--num) normal
      forwards;
  }
  .value-card-bot {
    width: 100%;
  }
}

@keyframes silde-in-contract {
  0% {
    filter: blur(0);
    transform: translateY(0);
  }
  2% {
    filter: blur(3px);
    transform: translateY(5%);
  }
  100% {
    filter: blur(0);
    transform: translateY(-83.333%);
  }
}
.card-lottery-gg {
  position: relative;
  .bord.c {
    top: calc(50% - 108rpx);
    left: calc(50% - 71.5rpx);
    width: 143rpx;
    height: 194rpx;

    box-shadow: 0 0 6rpx #fa4224;
  }
  .bord {
    position: absolute;
    top: calc(50% - 112rpx);
    left: calc(50% - 74.5rpx);
    width: 147rpx;
    height: 203rpx;
    overflow: hidden;
    border-radius: 18rpx;
    box-shadow: 0 0 6rpx #feea52;
    opacity: 0;
    animation: scale-in-center 1s linear 1s 1 normal forwards;

    .border-img.c {
      max-width: none;
      transform: translate(-30%, -30%);
      width: 500rpx;
      height: 500rpx;
      animation: rotate-center 5s linear 0s infinite normal none;
    }
    .border-img {
      transform: translate(-25%, -15%);
      width: 300rpx;
      height: 300rpx;
      animation: rotate-center-1 5s linear 0s infinite normal none;
    }
  }
  .gg-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 222rpx;
    &.remind {
      animation: scale-1 1s ease-in 0s 1 normal forwards;
    }
  }
}

@keyframes scale-1 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.15);
    opacity: 0.6;
  }
  80% {
    transform: scale(1.1);
    opacity: 0.2;
  }
  90% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes rotate-center {
  0% {
    transform: translate(-30%, -30%) rotate(0);
  }
  100% {
    transform: translate(-30%, -30%) rotate(360deg);
  }
}
@keyframes rotate-center-1 {
  0% {
    transform: translate(-25%, -15%) rotate(0);
  }
  100% {
    transform: translate(-25%, -15%) rotate(360deg);
  }
}
</style>
